<template>
    <div class="hai">
        
        <div class="navlist">
            <div class="nav3">
                <div class="nav31">
                    <div class="nav-left">
                        <img :src="people" alt="">   
                    </div>
                    <div class="nav-right">
                        <h4>{{pemane}}</h4>
                        <div class="jieshao"> <p>{{jieshao}}</p></div>
                        
                    </div>
                </div>
                <div class="nav32"><img src="kandian/6.png" alt=""></div>
                <div class="nav33"><img src="kandian/7.png" alt=""></div>
            </div>
            <div class="nav2">
                <p>{{text}}</p>
            </div>
            
        </div>
        <div class="imglist">
                <img :src="img[0].largeimg" alt="">
                <img :src="img[0].smallimg1" alt="">
                <img :src="img[0].smallimg2" alt="">
        </div>
         <div class="nav1">
            <h2>{{name}}</h2>
            <h4>{{houseSub}}</h4>
            <h3>{{rmb}}</h3>
        </div>
    </div>
</template>
<script>
export default {
    props: [
    "name",
    "img",
    "pemane",
    "rmb",
    "text",
    "houseSub",
    "people",
    "jieshao",

  ],
}
</script>
<style  scoped>
    .hai{
         width:90%;
        height:3.22rem;
        margin:0.16rem auto;
        border-radius:0.05rem;
        border:0.01rem solid #efefef;
        box-shadow:0rem 0.01rem 0.11rem 0.02rem #fafafa;
    }
    .imglist{
        width:100%;
        margin-bottom:0.2rem;
        display:flex;
        justify-content:space-evenly;
    }
    .imglist img{width:30%;height:50%;}
    .navlist{
        width:90%;
        height:1rem;
        display:flex;
        margin:0.1rem auto;
        flex-direction:column;
        justify-content: space-around;
    }
    .nav1{
        height:0.88rem;
        width:100%;
        display:flex;
        padding-left:10px;
        background: #f8f8f8;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .jieshao{
        overflow: hidden;
        height:0.14rem;
    }
    .nav-left {
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }
    .nav-left img {
        width: 100%;
    }
    .nav1 h2{
        font-size:0.16rem;
        font-weight:900;
    }
    .nav1 h2 span{
        display:inline-block;
        font-size:0.1rem;
        font-weight:500;
        margin-left:0.04rem;
        border:0.01rem solid #aaa;
        padding:0.02rem;
        border-radius:0.05rem;
    }
     h3{
        font-size:0.14rem;
        font-weight:700;
        color:#d21a00;
    }
    h4{
        font-size:0.12rem;
    }
    .nav2{
        height:0.58rem;
        width:100%;
        overflow: hidden;
    }
    .nav2 p{
        font-size:0.12rem;
        line-height:0.2rem;
    }
    .nav3{
        height:0.38rem;
        width:100%;
        display:flex;
        justify-content:space-between;
    }
    .nav3 img{
        width:0.4rem;
    }
    .nav31{
        width:61%;
         display:flex;
        justify-content:space-between;
    }
    .nav-right{margin-left:10px;}
    .nav-right h4{
        font-size:0.14rem;
    }
    .nav-right p{
        font-size:0.12rem;
        
    }
    .nav32{
        margin-left:0.1rem;
    }
</style>